
import React, { useEffect, useRef, useState } from 'react'
import './index.scss'
import {Typography,Form,Input,Row,Col,Button,message } from 'antd'
import { UserOutlined, LockOutlined ,MobileOutlined,TabletOutlined} from '@ant-design/icons';
import {Link, useNavigate } from 'react-router-dom'
import { reg } from '../../utils/validate';
import { ajax } from './../../api/index';

// 角色列表  
// 1. 学生
// 2. 讲师
// 3. 班主任
// 4. 校长
// 5. 管理员 

const {Title} = Typography

export default function Register() {
  const [src,setSrc] = useState<string>('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/3760b2031ff41ca0bd80bc7a8a13f7bb_preview.mp4')
  const myform:any = useRef()
  const [form] = Form.useForm()
  const navigate =  useNavigate()
  useEffect(()=>{
    ajax.testAction()
    .then(res=>{
      
    })
  },[])
  const layout:object = {
    labelCol:{
      span:5
    },
    wrapperCol:{
      span:18
    }
  }
  const layout2:any  = {
    wrapperCol:{
      offset:5,
      span:18
    }
  }
  interface Info{
    phone:string,
    username:string,
    password:string,
    dbpassword:string,
    role:number
  }
  // 表单校验成功
  const onFinish = async (value:Info)=>{
    console.log(value)
    if(value.password == value.dbpassword){
        // ajax 
        value.role=1;  // 默认角色
        let res = await  ajax.adminRegister(value)
        if(res.code == 200){
          setTimeout(()=>{
            navigate(`/login?username=${value.username}&phone=${value.phone}`)
          },1500)
        }
    }else{
      message.error('两次密码不一致,请确认')
    }
  } 
  // 表单校验失败 
  const onFinishFailed = ()=>{
    message.error('请输入正确的表单信息')
  }
  const resetFields = ()=>{
    console.log(form)
    form.resetFields()
  }


  return (
    <div className="login">
        <video 
            autoPlay
            muted
            loop
            playsInline
            id="myvideo"
            src={src}
            className="myvideo">
        </video>
        <div className="login-box">
            <Title className='title'>注册账号</Title>
            <div className="box">
            <Form
                name="normal_login"
                className="myform"
                initialValues={{ 
                  role:1   
                }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                ref={myform}
                form={form}
                {...layout}
            >
              <Form.Item
                  name="username"
                  label="用户名称"
                  rules={[{ required: true, message: '请输入用户名' }]}
              >
                  <Input prefix={<UserOutlined className="form-icon"  style={{color:"#ccc"}} />} placeholder="用户名称" />
              </Form.Item>
              <Form.Item
                  name="phone"
                  label="手机号码"
                  rules={[
                    { required: true, message: '请输入手机号' },
                    { pattern:reg.phone,message:'请输入正确的手机号'}
                  ]}
              >
                  <Input prefix={<TabletOutlined className="form-icon"  style={{color:"#ccc"}} />} placeholder="手机号码" />
              </Form.Item>
              <Form.Item
                  name="password"
                  label="登录密码"
                  rules={[
                    { required: true, message: '请输入密码' },
                    { pattern:reg.pwd,message:'请输入6-16的数字+字母组合的密码'}
                  ]}
              >
                  <Input prefix={<LockOutlined className="form-icon"  style={{color:"#ccc"}} />} placeholder="登录密码" />
              </Form.Item>
              <Form.Item
                  name="dbpassword"
                  label="确认密码"
                  rules={[
                    { required: true, message: '请输入确认密码' },
                    { pattern:reg.pwd,message:'请输入6-16的数字+字母组合的密码'}
                  ]}
              >
                  <Input prefix={<LockOutlined className="form-icon"  style={{color:"#ccc"}} />} placeholder="确认密码" />
              </Form.Item>
              <Form.Item className="lastbtns" {...layout2} >
                  <Row>
                      <Col span={11} offset={0}>
                          <Button type="primary" htmlType="submit" className="login-form-button"  style={{width:'100%'}}>
                              注册
                          </Button>
                      </Col>
                      <Col span={11} offset={2}>
                          {/* <Button danger htmlType="reset" className="login-form-button" style={{width:'100%'}}>
                              重置
                          </Button> */}
                           <Button danger onClick={resetFields} className="login-form-button" style={{width:'100%'}}>
                              重置
                          </Button>
                      </Col>
                  </Row>
              </Form.Item>
              <Form.Item className="lastbtns" {...layout2} >
                  <div className="btns" >
                      <Link to="/login"  className='litem '>去登录</Link>
                      <Link to="/forgetpass"  className='litem bg' >忘记密码</Link>
                  </div>
              </Form.Item>
            </Form>
            </div>
        </div>
    </div>
  )
}